<template>
  <div class="database-right">
    <!-- <el-table-column label="序号" type="index" :index="indexMethod" width="47" align="center">
            </el-table-column> -->
    <div class="task-list box">
      <moduleRight title="网格员任务清单">
        <div class="content">
          <el-table
            :data="taskList"
            border
            class="table"
            height="100%"
            :span-method="mergeSameRows"
          >
            <el-table-column
              label="重点人员类型"
              prop="personType"
              align="center"
              width="100"
            >
              <template slot-scope="scope">
                <el-tooltip effect="dark" placement="top">
                  <div slot="content" style="max-width: 20vw">
                    {{ scope.row.typeDesc }}
                  </div>
                  <span>
                    {{ scope.row.personType }}
                    <i class="el-icon-info" style="cursor: pointer"></i>
                  </span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column
              label="频次"
              prop="frequency"
              align="center"
              width="80"
              show-overflow-tooltip
              :tooltip-effect="'dark'"
            >
            </el-table-column>
            <el-table-column
              label="关注方式及任务"
              prop="measures"
              align="center"
            >
            </el-table-column>
            <el-table-column
              label="责任主体"
              prop="duty"
              align="center"
              width="50"
            >
            </el-table-column>
          </el-table>
        </div>
      </moduleRight>
    </div>

    <!-- <div class="person-type box">
      <moduleRight title="人员分类研判">
        <div class="content" id="person-type-chart"></div>
      </moduleRight>
    </div>
    <div class="quantity-trend box">
      <moduleRight title="人员数量趋势分析">
        <div class="content" id="quantity-trend-chart"></div>
      </moduleRight>
    </div>
    <div class="treatment box">
      <moduleRight title="补贴待遇">
        <div class="content" id="treatment-chart"></div>
      </moduleRight>
    </div> -->
  </div>
</template>

<script>
import { mixins } from "./js/mixins";
export default {
  name: "databaseRight",
  mixins: [mixins],
  data() {
    return {
      taskList: this.$store.state.taskList,
    };
  },
  mounted() {
    // this.initPersonType();
    // this.initQuantityTrend();
    // this.initTreatment();
  },
  methods: {
    indexMethod(index) {
      return index * 1 + 1;
    },
    mergeSameRows({ row, column, rowIndex, columnIndex }) {
      // 第一列的行合并
      if (columnIndex === 0) {
        if (rowIndex === 20) {
          return [3, 1];
        } else if (rowIndex === 25) {
          return [3, 1];
        } else if (rowIndex === 28) {
          return [4, 1];
        } else if (
          rowIndex === 21 ||
          rowIndex === 22 ||
          rowIndex === 26 ||
          rowIndex === 27 ||
          rowIndex === 29 ||
          rowIndex === 30 ||
          rowIndex === 31
        ) {
          return [0, 0];
        } else {
          return [1, 1];
        }
      }
      // 第三 列的行合并
      if (columnIndex === 2) {
        if (rowIndex === 0) {
          return [3, 1];
        } else if (rowIndex === 3) {
          return [4, 1];
        } else if (rowIndex === 7) {
          return [6, 1];
        } else if (rowIndex === 14) {
          return [4, 1];
        } else if (rowIndex === 19) {
          return [5, 1];
        } else if (rowIndex === 24) {
          return [8, 1];
        } else if (rowIndex === 13 || rowIndex === 18) {
          return [1, 1];
        } else {
          return [0, 0];
        }
      }
      // 第四列的行合并
      if (columnIndex === 3) {
        if (rowIndex === 0) {
          return [3, 1];
        } else if (rowIndex === 3) {
          return [4, 1];
        } else if (rowIndex === 7) {
          return [6, 1];
        } else if (rowIndex === 14) {
          return [4, 1];
        } else if (rowIndex === 19) {
          return [4, 1];
        } else if (rowIndex === 24) {
          return [4, 1];
        } else if (rowIndex === 28) {
          return [4, 1];
        } else {
          // return [0, 0];
        }
      }
    },
    initPersonType() {
      let xdata = ["特别关注", "重点关注", "及时关注", "专项关注", "日常关注"];
      let ydata = [40, 38, 32, 30, 28];
      this.setPersonType({ xdata, ydata }, "person-type-chart");
    },
    initQuantityTrend() {
      let xdata = ["10.2", "10.3", "10.4", "10.5", "10.6", "10.7", "10.8"];
      let ydata = [582, 735, 1048, 484, 1048, 735, 580];
      this.setQuantityTrend({ xdata, ydata }, "quantity-trend-chart");
    },
    initTreatment() {
      let xdata = ["10.8", "10.7", "10.6", "10.5", "10.4", "10.3", "10.2"];
      let ydata = [1048, 735, 580, 484, 464, 281, 875];
      this.setTreatment({ xdata, ydata }, "treatment-chart");
    },
  },
};
</script>

<style scoped lang="scss">
.database-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .task-list {
    width: 100%;
    height: 100%;
    .content {
      height: calc(100% - 0px);
    }
  }
  // .person-type {
  //   width: 100%;
  //   height: 30%;
  //   .content {
  //     height: calc(100% - 0px);
  //   }
  // }
  // .quantity-trend {
  //   width: 100%;
  //   height: 34%;
  //   .content {
  //     height: calc(100% - 0px);
  //   }
  // }
  // .treatment {
  //   width: 100%;
  //   height: 34%;
  //   .content {
  //     height: calc(100% - 0px);
  //   }
  // }
}
</style>
